<template>
	<view class="fusion_deta">
		<uv-navbar leftIcon="arrow-leftward" leftIconColor="#FFF" placeholder autoBack bgColor="#161714">
			<template v-slot:center>
				<view class="center_slot">合成中心</view>
			</template>
		</uv-navbar>
		<view class="link">
			<view class="item" @click="router('/pages/home/fusion_record')">
				<image src="@/static/images/f1.png"></image>
				<view>合成记录</view>
			</view>
			<!-- <view class="item" @click="router('/pages/home/fusion_rule')"> -->
			<view class="item" @click="router(`/pages/home/fusion_rule_deta?id=${oid}`)">

				<image src="@/static/images/f2.png"></image>
				<view>活动规则</view>
			</view>
			<view class="item" @click="tabsRouter('/pages/tabbar/my')">
				<image src="@/static/images/f3.png"></image>
				<view>我的藏品</view>
			</view>
		</view>
		<view class="content">
			<view class="cover_bg">
				<view class="auto" @click="autoChoose">自动选择></view>
				<view class="submit" @click="submit">点击合成</view>
			</view>
			<view class="list">
				<view class="item" v-for="item in list" @click="choose(item.id)">
					<view class="add">
						<image :src="item.cover" class="cover" v-if="item.number>0"></image>
						<image src="@/static/images/f5.png" v-else></image>
					</view>
					<view class="number">{{item.name}}({{item.number}}/{{item.total}})</view>
				</view>
			</view>
		</view>
		<uv-popup ref="popupRef" round="10" bgColor="none" mode="bottom" :closeOnClickOverlay="false">
			<Choose :data="props_data" @change="change" v-if="active==1" />
			<ChooseResult :checkbox="checkbox" @close="popupRef.close" @confirm="confirm" v-else />
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		composeInfo,
		composeOperate,
		orderLists
	} from "@/request/api";
	import Choose from "@/components/home/Choose.vue";
	import ChooseResult from "@/components/home/ChooseResult.vue";
	import {
		onLoad,
		onShow,
		onHide
	} from "@dcloudio/uni-app";
	import {
		ref,
		shallowRef
	} from "vue";
	import useBase from "@/hooks/useBase.js";
	const {
		router,
		tabsRouter
	} = useBase();

	const list = ref([]);
	let id = "";
	let oid = ref("");

	onLoad(async (options) => {
		oid.value = id = options.id;
	});
	onShow(async () => {
		let {
			info: {
				need
			}
		} = await composeInfo({
			id
		});
		let temp = [];
		need.forEach(item => {
			temp.push({
				id: item.product.id,
				name: item.product.name,
				cover: item.product.cover,
				total: item.number,
				number: 0,
				checkbox: []
			});
		});
		list.value = temp;
	});

	const active = ref(1);
	const popupRef = shallowRef();
	const props_data = ref({});
	const choose = (id) => {
		active.value = 1;
		const dataItem = list.value.find(item => item.id == id);
		props_data.value = dataItem;
		popupRef.value.open();
	};
	const change = (data) => {
		let index = list.value.findIndex(item => item.id == data.id);
		list.value.splice(index, 1, data);
		popupRef.value.close();
	};

	const checkbox = ref([]);
	const submit = () => {
		active.value = 2;
		list.value.forEach(item => {
			checkbox.value = [...checkbox.value, ...item.checkbox]
		});
		popupRef.value.open();
	};
	const confirm = async () => {
		let ids = []
		list.value.forEach(item => {
			let checkbox = item.checkbox;
			checkbox.forEach(dataItem => {
				ids.push(dataItem.id)
			});
		});
		let {
			order_id
		} = await composeOperate({
			id: id,
			order_ids: ids
		});
		uni.$uv.toast("操作成功");
		popupRef.value.close();
		setTimeout(() => {
			router(`/pages/common/fusion_result?id=${order_id}`)
		}, 1500);
	};

	const autoChoose = async () => {
		uni.$uv.toast("自动选择中,请稍等");
		let {
			list: {
				list: data
			}
		} = await orderLists({
			page: 1,
			limit: 999,
			status: 1,
			product_id: props_data.id,
		});
		let need = list.value;
		for (let j = 0; j < need.length; j++) {
			let needItem = need[j];
			needItem.checkbox = [];
			for (let i = 0; i < data.length; i++) {
				let dataItem = data[i];
				if (dataItem.product_id == needItem.id && needItem.number != needItem.total) {
					needItem.checkbox.push(dataItem);
					needItem.number = needItem.checkbox.length;
				}
			}
		}
	};
	onHide(() => {
		list.value = [];
		checkbox.value = [];
		popupRef.value.close();
	});
</script>

<style scoped lang="scss">
	.fusion_deta {
		min-height: 1624rpx;
		background: url(@/static/images/bg1.png) no-repeat;
		background-size: 100% 100%;

		.center_slot {
			color: #FFFFFF;
			font-size: 18px;
			font-weight: bold;
		}

		.link {
			padding: 30rpx 30rpx 0;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-end;

			.item {
				margin-left: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				view {
					color: #FFFFFF;
					font-size: 24rpx;
					font-weight: 400;
					padding-top: 10rpx;
					box-sizing: border-box;
				}
			}
		}

		.content {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;

			.cover_bg {
				width: 644rpx;
				height: 515rpx;
				margin: 80rpx auto 0;
				background: url(@/static/images/f4.png) no-repeat;
				background-size: 100% 100%;
				position: relative;

				.auto {
					color: #FFFFFF;
					font-size: 28rpx;
					position: absolute;
					left: 50%;
					top: 0;
					transform: translate(-50%, -50%);
					z-index: 3;
				}

				.submit {
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					color: #111111;
					font-size: 28rpx;
					border-radius: 10rpx;
					background: #DDF247;
					position: absolute;
					left: 50%;
					bottom: -15rpx;
					transform: translateX(-50%);
					z-index: 2;
				}
			}

			.list {
				padding: 20rpx 0;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					margin-top: 30rpx;

					.add {
						width: 194rpx;
						height: 194rpx;
						border-radius: 50%;
						border: 2px solid #DDF247;
						background: #000000;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 44rpx;
							height: 44rpx;
						}

						.cover {
							width: 194rpx;
							height: 194rpx;
							border-radius: 50%;
						}
					}

					.number {
						text-align: center;
						color: #FFFFFF;
						font-size: 26rpx;
						padding: 20rpx 0;
						box-sizing: border-box;
					}

					.btn {
						width: 160rpx;
						height: 48rpx;
						line-height: 48rpx;
						text-align: center;
						color: #111111;
						font-size: 28rpx;
						border-radius: 10rpx;
						margin: 0 auto;
						background: #DDF247;
					}
				}
			}
		}
	}
</style>